<template>
  <div class="persson">
    <div>姓名: {{person.name}}</div>
    <div>年龄: {{person.info.age}}</div>
    <div>邮箱: {{person.info.email}}</div>
    <button type="button" @click="addName">姓名</button>
    <button type="button" @click="addAge">年龄</button>
    <button type="button" @click="addEmail">邮箱</button>
    <button type="button" @click="changeInfo">改变信息</button>
  </div>
</template>

<script lang="ts">
  /**
   * @Author Rin_pu
   * @Date 2025/2/18 14:05
   * @Description MyTest5
   * @todo
   */
  export default {
    name: "MyTest5"
  }
</script>

<script setup lang="ts">
import {ref, watch, watchEffect} from "vue";

  const person = ref({
    name: "Rinpu",
    info: {
      age: 18,
      email: '3206764203@qq.com',
    }
  });
  function addName() : void {
    person.value.name += 'u';
  }
  function addAge() : void {
    person.value.info.age += 1;
  }
  function addEmail() : void {
    person.value.info.email += 'm';
  }
  function changeInfo() : void {
    person.value.info = {age: 29, email: 'Rinpu@qq.com'};
  }
  // watch有四种方式, 1: ref, 2: reactive, 3: getter函数, 4: 数组[() => ...]
  /*watch(() => person.value.name, (value) => {
    console.log(value);
  },{deep:true});*/
  // watchEffect
  /* watchEffect(() => {
     if (person.value.info.age >= 20) {
       console.log('超过了')
     }
   })*/
  /**
   *
   *  1. defaults中:
   *    1.1: 如果为基础类型直接 : 就行
   *    1.2: 数组[], 类 {}
   *
   */
  withDefaults(defineProps<{person ?: number}>(),{
    person : 'Rinpu'
  });
</script>

<style scoped>
  .persson {
    background-color: skyblue;
    padding: 16px;
  }
</style>